/**
 * 首页组件 created to by doujiabao
 */

import React, { PureComponent } from 'react'

import {
    dateFormat
} from '~/utils'

class StandardGroupImgItem extends PureComponent {

    goLevectTopic = (userInfo) => {
        window.open(`http://92.levect.com/topic?tagid=${userInfo.userId}&tagname=${userInfo.userName}`, '_self')
    }

    render() {

        const {
            data
        } = this.props

        const {
            contentExtra = [],
            comments = []
        } = data

        const content = data.content.substring(0, (!!contentExtra.length ? contentExtra[0].start : data.content.length))

        return (!!data.createtime && <div className='standardGroupImgItem'>
            <div className='standardGroupImgItemHeader'>
                <div className='standardGroupImgItemUserInfo'>
                    <div
                        className='standardGroupImgItemAvatar'
                        style={{
                            background: `url(${data.authorUrl}) no-repeat`,
                            backgroundSize: 'cover'
                        }}
                    ></div>
                    <div className='standardGroupImgItemName'>
                        <div>{data.authorName}</div>
                        <span>{dateFormat('YYYY-MM-DD hh:mm:ss', data.createtime * 1000)}</span>
                    </div>
                </div>
                <div className='standardGroupImgItemFollow'>关注</div>
            </div>

            <div
                className='standardGroupImgItemContent'
                style={{
                    background: `url(${data.url}) no-repeat`,
                    backgroundSize: 'cover'
                }}
            ></div>

            <div className='standardGroupImgItemFooter'>
                <div className='standardGroupImgItemOperation'>
                    <img src='https://static.huajuanmall.com/subject/o_1eeeraf9s1b161mo9sugqor1sk6u.png' alt='喜欢' />
                    <img src='https://static.huajuanmall.com/subject/o_1eeeraf9sq07s7388nf6q15slt.png' alt='评论' />
                </div>
                <div className='standardGroupImgItemInfo'>
                    <div className='fabulous'>{data.collectNum} 次赞</div>
                    <div className='other'>
                        <b>{data.authorName}</b>
                        <span>{content}</span>
                        {!!contentExtra.length && <label onClick={this.goLevectTopic.bind(this, contentExtra[0])}>{contentExtra[0].userName}</label>}
                    </div>
                </div>
                <div className='standardGroupImgItemComment'>
                    {!!comments.length && <div className='commentList'>
                        <span>{comments.length} 次评论</span>
                        {comments.map((itm, idx) => (<div key={idx}>
                            <div><b>{itm.userName}</b>{itm.content}</div>
                            <img src='https://static.huajuanmall.com/subject/o_1eeeraf9s1b161mo9sugqor1sk6u.png' alt='喜欢' />
                        </div>))}

                    </div>}
                    <div className='comment'>
                        <img src='https://static.huajuanmall.com/subject/o_1eeesof51ht91s5b1lph12751urms.png' alt='头像' />
                        <input type='text' placeholder='添加评论......' />
                    </div>
                </div>
            </div>

            <style>{`
                .standardGroupImgItem {
                    width: 100%;
                    padding: 20px 0;
                }

                .standardGroupImgItemHeader {
                    padding: 0 14px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .standardGroupImgItemUserInfo {
                    display: flex;
                    align-items: center;
                }

                .standardGroupImgItemUserInfo .standardGroupImgItemAvatar {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                }

                .standardGroupImgItemName {
                    margin-left: 10px;
                    width: 170px;
                }

                .standardGroupImgItemName div {
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;

                }
                .standardGroupImgItemName span {
                    font-size: 12px;
                    color: #999999;
                }

                .standardGroupImgItemFollow {
                    width: 77px;
                    height: 28px;
                    background: #FE2346;
                    color: #ffffff;
                    border-radius: 6px;
                    text-align: center;
                    line-height: 28px;
                    font-size: 14px;
                }

                .standardGroupImgItemContent {
                    margin-top: 14px;
                    width: 375px;
                    height: 375px;
                }

                .standardGroupImgItemFooter {
                    margin-top: 14px;
                    padding: 0 10px;
                }

                .standardGroupImgItemOperation img {
                    width: 22px;
                    margin-right: 12px;
                }

                .fabulous {
                    margin-top: 8px;
                    color: #262626;
                    font-size: 14px;
                    font-weight: bold;
                }

                .other {
                    font-size: 14px;
                    margin-top: 4px;
                }

                .other > * {
                    margin-right: 6px;
                }

                .other label {
                    color: #356693;
                    font-weight: bold;
                }

                .standardGroupImgItemComment {
                    margin-top: 4px;
                }

                .commentList span {
                    color: #999999;
                    font-size: 12px;
                }

                .commentList>div {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 2px;
                    color: #262626;
                }

                .commentList>div img {
                    width: 12px;
                }

                .commentList>div b {
                    margin-right: 6px;
                }

                .comment {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                }

                .comment img {
                    width: 26px;
                    height: 26px;
                }

                .comment input {
                    margin-left: 10px;
                    border: none;
                    outline: none;
                }
            `}</style>
        </div>)
    }
}

StandardGroupImgItem.defaultProps = {
    data: {}
}

export default StandardGroupImgItem